<template>
  <div class="user">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin: 0 0 20px 0"
    >
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card_box">
      <div class="header_box">
        <el-input
          style="width: 168px; margin-right: 24px"
          v-model="query.key.userName"
          placeholder="请输入学生名字"
          clearable
        ></el-input>

        <el-button type="primary" @click="clikcUsertListSearch">
          确认搜索
        </el-button>
      </div>
      <el-table :data="initData" style="width: 100%">
        <el-table-column prop="userNo" label="学号" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="140">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="120">
        </el-table-column>
        <el-table-column prop="professional" label="专业" width="180">
        </el-table-column>
        <el-table-column prop="classes" label="班级" width="160">
        </el-table-column>
        <el-table-column prop="telephone" label="手机号" width="160">
        </el-table-column>
        <el-table-column prop="imagesUrl" label="头像" width="68">
          <template slot-scope="scope">
            <img :src="scope.row.imagesUrl" width="48px" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="修改权限" min-width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.role"
              placeholder="请选择"
              @change="changeRole(scope.row)"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="冻结用户">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.disable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeDisable(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center; margin-top: 24px"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleSizeChange"
        :page-size="query.pageSize"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getUserList, getUserEdit } from "@/util/users.js";
export default {
  data() {
    return {
      options: [
        { id: 1, value: "管理员" },
        { id: 2, value: "普通用户" },
      ],
      query: {
        key: {
          userName: "",
        },
        pageSize: 10,
        pageNum: 1,
      },
      initData: [],
      total: 10,
    };
  },
  created() {
    this.getUserList();
  },
  mounted() {},
  methods: {
    // 初始数据 获取用户
    async getUserList() {
      let { data: res } = await getUserList(this.query);
      console.log(res);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.initData = res.data.list;
      this.total = res.data.total;
    },
    // 点击搜索按钮
    clikcUsertListSearch() {
      this.getUserList();
    },
    // 修改权限
    async changeRole(e) {
      let { data: res } = await getUserEdit({
        id: e.id,
        role: e.role,
      });
      console.log(res);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
    },
    // 冻结解冻 用户
    async changeDisable(e) {
      let { data: res } = await getUserEdit({
        id: e.id,
        disable: e.disable,
      });
      console.log(res);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
    },
    // 分页 切换
    handleSizeChange(e) {
      this.query.pageNum = e;
      this.getUserList();
    },
  },
};
</script>
<style lang="less" scoped>
.card_box {
  min-height: calc(100vh - 200px);
  .header_box {
    display: flex;
    margin-bottom: 24px;
  }
}
</style>
